{extend name="public/base"/} {block name="body"}
<style>
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-col-xs-9 {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-control-content {
        display: block;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
    .mui-toast-container {
        bottom: 50%;
        z-index: 999999999999999999;
    }
    .mui-btn-block{
      padding: 5px;
      border: 1px solid #ccc !important;
      margin: 5px;
      -webkit-appearance: none;
    }
    .active .mui-icon{
      display: block !important;
    }
    .paylist.open{
          overflow-y: scroll;
    }

    .info-box{
      background-color: #3190e8;
      padding: .4rem .4rem;
      color:#fff;
    }
    .info-box .headimg {
      padding: 0.5rem 0;
    }
    .info-box .headimg img{

      font-size: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;
      height: 1.6rem;
      background: #fff;
      display: inline-block;
      vertical-align: middle;

    }
    .balance{
          color: #f90;
    }
    .hongbao{
          color: #ff5f3e;
    }
    .score{
            color: #6ac20b;
    }
    .mui-row {
      background-color: #fff;
    }
    .mui-row .mui-col-xs-6{
      padding: .453333rem 0 .293333rem;
      font-size: .32rem;
      line-height: .32rem;
      border-right: 1px solid #ddd;
    }

    .mui-row .mui-col-xs-6 span{
       font-size: .693333rem;
       line-height: .693333rem;
       font-weight: 700;
    }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<header class="mui-bar mui-bar-nav" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">付款</h1>
</header>
<div class="mui-content" style="    margin-bottom:60px;">
  <div class="info-box mui-text-center">
    <div class="headimg">
      <img src="{$Think.session.user.headimgurl}">
    </div>
    <h4>Hi.{$Think.session.user.nickname}</h4>
  </div>
  <div class="mui-row mui-text-center">
    <div class="mui-col-xs-6">
       <p class="balance"> <span>{$Think.session.user.balance}</span>元 </p>
       <p >我的余额</p>
    </div>
    <div class="mui-col-xs-6" onclick='window.location.href = "{:url('index/coupon/integraltest')}"'>
      <p class="score"> <span>{$Think.session.user.integral}</span>分 </p>
      <p >我的积分</p>
    </div>
  </div>
<br />
  <div class="mui-card" style="padding:10px;">


    <!-- {empty name="$Think.session.user.name"} -->
     <!--
        <a href="{:url('user/info',['url'=>'pay'])}" class="mui-btn mui-btn-primary" style="width:100%;margin-top:20px;">璇峰厛娉ㄥ唽浼氬憳锛�</a>     
         {else /}     -->
     

    <form class="mui-input-group" method="post"  action="{:url('index/order/offlinepay')}">
    					<div class="mui-input-row">
    						<label>金额</label>
                		<input type="number" name="total" placeholder="请输入金额">
    					</div>

              <div class="cart-item fee" id="payment" style="border-top:none;padding-left:0;">
                <span style="font-size:14px;    color: #000;">优惠券 <span id="cnum"></span></span>
                <span class="cartitem-right">
                  <i id="paywaytext" style="    font-style: normal;">

                  </i>
                  <input type="hidden" name="coupon_id" >
                  <span class="mui-icon mui-icon-arrowright"></span>
                </span>
              </div>

              <aside class="paylist ">
                  <header class="paylist-header">支付方式</header>

              </aside>
              <div class="mask "></div>

              <div class="mui-input-row">
    						<label>可用余额</label>
                		<div style="line-height: 40px;">{$Think.session.user.balance}元</div>
    					</div>
              <div class="mui-input-row">
    						<label>待支付</label>
                		<div style="line-height: 40px;"><span class="price">0</span> 元</div>
    					</div>

              <div>
                          <input type="hidden" name="offlinepay_status" value="{$xstatus}" />
              						<button type="button" class="mui-btn mui-btn-primary sbt" onclick="return false;" style="width:100%;margin-top:20px;">确认</button>&nbsp;&nbsp;

              					</div>
    				</form>




    {/empty}


  </div>
  <ul class="mui-table-view">

      <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="{:url('index/coupon/integral')}">
    						我的积分中心
    					</a>
      </li>

  </ul>

</div>
{include file="public/nav" /}
<script id="zt" type="text/html">
    {{each  as value i}}
      <div class="paylist-item " data-couponid='{{value.id}}' data-total="{{value.total}}" data-price="{{value.price}}"><span> 满{{value.total}}元减{{value.price}}  </span> <span class="mui-icon mui-icon-checkmarkempty" style="color:#007aff;border: 1px solid;display:none"></span></div>

    {{/each}}
</script>
{/block}
{block name="script"}
<script type="text/javascript">
  $(function(){
     var balance = "{$Think.session.user.balance}"
    $("input[name='total']").keyup(function(){
      var val = $(this).val()

      if(Number(val) > Number(balance)){
        console.log(2);
        val = val-balance
      }else{
        val = 0
      }
      $('.price').text(val.toFixed(2))
      $('[name="coupon_id"]').val(0)
      $('#paywaytext').text(' ')
    })

    var subscribe = '{$subscribe}';
    // if(subscribe != 1){      	if(subscribe > 2){
      $.get("{:url('index/getSubscribe')}", function(data){
        if(data.value == 0){
          mui.alert('<img src="/public/images/qrcode_for_wx.jpg" style="width:100%;"><p style=" text-align: left;"><b>无法识别二维码</b><br />1、打开微信，点击‘添加朋友’<br />2、点击公众号<br />3、搜索公众号：贵阳鲜果屋<br />4、点击‘关注’，完成</p>', '请长按扫二维码关注公众号');
          return ;
        }
      })
    }


    $.post("{:url('index/coupon/getcouponlist')}", function(data) {
       var html = template('zt', data);
       $('.paylist').html(html);


      $('#cnum').text('('+data.length+'张)')

      $('.paylist-item').on('tap', function(){
        var val = $(this).text(),couponid = $(this).attr('data-couponid'),
                  price =  $(this).attr('data-price'),total =  $(this).attr('data-total'),
                  shop_price = $("input[name='total']").val()
        //判断是否满足优惠券条件

        if((shop_price-total)>=0){
          $('#paywaytext').text(val)
          $('.paylist').next().removeClass('open')
          $('.paylist').removeClass('open')
          $(this).addClass('active').siblings().removeClass('active')
          $('.price').text(shop_price-price-balance)
          $('[name="coupon_id"]').val(couponid)
        }else{
          mui.toast('未满足条件')
        }

      })


    }, "json");



    $('#payment').on('tap', function(){
        $('.paylist').addClass('open');
        $('.paylist').next().addClass('open');
    })
    $('.mask').on('tap', function(){
      $(this).removeClass('open')
      $('.paylist').removeClass('open')
    })



    //确定付款
    $('.sbt').on('tap', function(){

       // if(subscribe != 1){      	if(subscribe > 2){
        $.get("{:url('index/getSubscribe')}", function(data){
          if(data.value == 0){
            mui.alert('<img src="/public/images/qrcode_for_wx.jpg" style="width:100%;"><p style=" text-align: left;"><b>无法识别二维码</b><br />1、打开微信，点击‘添加朋友’<br />2、点击公众号<br />3、搜索公众号：贵阳鲜果屋<br />4、点击‘关注’，完成</p>', '请长按扫二维码关注公众号');
            return ;
          }
        })
      }else{
        var total = $.trim($('[name="total"]').val())
        if(!total){
          mui.toast('请输入金额！')
          return;
        }
        var btnArray = ['否', '是'];
        mui.confirm('您确定要消费吗？', '消费', btnArray, function(e) {
          if (e.index == 1) {
          $('form').submit()
          } else {
            return ;
          }
        })
      }



    })


  })
</script>
{/block}
